<template>
  <div class="admin-login-container">
    <div class="bg">
      <span class="c c1"></span>
      <span class="c c2"></span>
      <span class="c c3"></span>
    </div>

    <div class="admin-login-card">
      <div class="header">
        <div class="logo">
          <svg width="46" height="46" viewBox="0 0 48 48" fill="none">
            <rect width="48" height="48" rx="12" fill="#10b981"/>
            <path d="M16 20h16v8H16z" fill="white"/>
            <path d="M20 16h8v4h-8z" fill="white"/>
          </svg>
        </div>
        <div class="titles">
          <h1>平台管理员登录</h1>
          <p>进入系统管理后台</p>
        </div>
      </div>

      <form class="form" @submit.prevent="onSubmit">
        <div class="form-item">
          <label for="username">用户名</label>
          <div class="input-wrap">
            <input id="username" v-model="form.username" type="text" placeholder="请输入用户名" autocomplete="username" />
          </div>
        </div>

        <div class="form-item">
          <label for="password">密码</label>
          <div class="input-wrap">
            <input id="password" v-model="form.password" :type="showPassword ? 'text' : 'password'" placeholder="请输入密码" autocomplete="current-password" />
            <button type="button" class="toggle" @click="togglePassword" :disabled="loading">
              <svg v-if="showPassword" width="18" height="18" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10 3C5 3 1.73 7.11 1 10c.73 2.89 4 7 9 7s8.27-4.11 9-7c-.73-2.89-4-7-9-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10z"/>
              </svg>
              <svg v-else width="18" height="18" viewBox="0 0 20 20" fill="currentColor">
                <path d="M2.93 17.07A10 10 0 1 1 17.07 2.93 10 10 0 0 1 2.93 17.07zM11.4 14.8L9.6 13l1.8-1.8-1.4-1.4L8.2 11.6 6.4 9.8l1.8-1.8-1.4-1.4L5 8.4 3.2 6.6l1.4-1.4L6.4 7l1.8-1.8 1.4 1.4L8.8 8.4l1.8 1.8 1.4-1.4L13.8 7l1.8 1.8-1.4 1.4L12.4 8.4l-1.8 1.8 1.4 1.4z"/>
              </svg>
            </button>
          </div>
        </div>

        <div class="form-row">
          <label class="checkbox">
            <input v-model="form.remember" type="checkbox" />
            记住我
          </label>
          <a href="#" class="link" @click.prevent="onForgot">忘记密码？</a>
        </div>

        <div v-if="error" class="error">{{ error }}</div>

        <button type="submit" class="submit" :disabled="loading">
          <svg v-if="loading" class="spinner" width="18" height="18" viewBox="0 0 50 50">
            <circle cx="25" cy="25" r="20" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-dasharray="31.4 31.4">
              <animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.9s" repeatCount="indefinite"/>
            </circle>
          </svg>
          <span>{{ loading ? '登录中…' : '登录' }}</span>
        </button>
      </form>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const loading = ref(false)
const showPassword = ref(false)
const error = ref('')

const form = reactive({
  username: '',
  password: '',
  remember: false
})

onMounted(() => {
  const remembered = localStorage.getItem('admin_remember')
  const rememberedUser = localStorage.getItem('admin_username')
  if (remembered === 'true' && rememberedUser) {
    form.username = rememberedUser
    form.remember = true
  }
})

const validate = () => {
  if (!form.username || !form.password) {
    error.value = '请输入用户名和密码'
    return false
  }
  if (form.password.length < 4) {
    error.value = '密码长度不能少于4位'
    return false
  }
  error.value = ''
  return true
}

const togglePassword = () => {
  showPassword.value = !showPassword.value
}

const onForgot = () => {
  alert('请联系系统管理员重置密码')
}

const onSubmit = async () => {
  if (!validate()) return
  loading.value = true
  try {
    // 模拟登录请求
    await new Promise(resolve => setTimeout(resolve, 800))

    // 模拟返回token并存储
    const token = 'admin-mock-token-' + Math.random().toString(36).slice(2)
    localStorage.setItem('admin_token', token)
    localStorage.setItem('admin_username', form.username)
    localStorage.setItem('admin_remember', String(form.remember))

    // 跳转到后台首页
    router.push('/admin')
  } catch (e) {
    error.value = '登录失败，请重试'
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.admin-login-container {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 10;
}

.admin-login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffffcc;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(16, 185, 129, 0.08);
  border-radius: 16px;
  padding: 28px 24px;
  box-shadow: 0 25px 60px -20px rgba(16, 24, 40, 0.35);
}

.header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.logo { display: grid; place-items: center; }

.titles h1 {
  margin: 0;
  font-size: 22px;
  color: #0f172a;
}

.titles p {
  margin: 4px 0 0 0;
  color: #64748b;
  font-size: 14px;
}

.form { margin-top: 8px; }

.form-item { margin-top: 14px; }
.form-item label {
  display: block;
  font-size: 13px;
  color: #334155;
  margin-bottom: 6px;
}

.input-wrap { position: relative; }
.input-wrap input {
  width: 100%;
  padding: 12px 40px 12px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  outline: none;
  font-size: 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
  background: #ffffff;
}
.input-wrap input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
}

.toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  color: #0f172a;
}
.toggle:hover { background: #f1f5f9; }
.toggle:disabled { opacity: .5; cursor: not-allowed; }

.form-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.checkbox { display: inline-flex; align-items: center; gap: 8px; color: #475569; font-size: 13px; }
.link { color: #10b981; text-decoration: none; font-size: 13px; }
.link:hover { text-decoration: underline; }

.error { margin-top: 10px; color: #ef4444; font-size: 13px; }

.submit {
  margin-top: 16px;
  width: 100%;
  height: 42px;
  background: #10b981;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.submit:disabled { opacity: .8; cursor: not-allowed; }

.spinner { display: block; }

.bg { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(1000px 600px at 10% 10%, rgba(16,185,129,.12), transparent), radial-gradient(1000px 600px at 90% 90%, rgba(59,130,246,.12), transparent), linear-gradient(135deg, #f0fdfa, #f8fafc); }
.c { position: absolute; border-radius: 50%; filter: blur(40px); opacity: .25; }
.c1 { width: 420px; height: 420px; background: #22c55e; top: -120px; left: -120px; }
.c2 { width: 540px; height: 540px; background: #0ea5e9; bottom: -160px; right: -120px; }
.c3 { width: 320px; height: 320px; background: #f59e0b; top: 20%; right: 20%; opacity: .15; }

@media (max-width: 480px) {
  .admin-login-card { padding: 22px 18px; }
}
</style>


